<template>
	<view class="box bg-white">
		<view>
			<searchNav @search="search" />
		</view>
		<view class="padding-l-r-25">
			<view class="justifyContent-spaceBetween title">
				<text class="fs-32 color-0 fw-b">居家服务</text>
				<view class="color-80 fs-24" @click="goMore">更多 ></view>
			</view>
			<view class="justifyContent-spaceBetween img-bar">
				<view @click="goCateDetails(0)">
					<image :src="BASE_URL + '/uploads/20250815/776cd54213242cf5c1f0bccebcbec498.png'" mode="aspectFill"></image>
				</view>
				<view @click="goCateDetails(1)">
					<image :src="BASE_URL + '/uploads/20250815/adb5ef0a797e320b84d3fadef16aa5fe.png'" mode="aspectFill"></image>
				</view>
				<view @click="goCateDetails(2)">
					<image :src="BASE_URL + '/uploads/20250815/c38fdb0269d78d841c1923e99bc47af2.png'" mode="aspectFill"></image>
				</view>
				<view @click="goCateDetails(3)">
					<image :src="BASE_URL + '/uploads/20250815/3a63df89f3767baba25e90ec067b8d15.png'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="justifyContent-spaceBetween title">
				<text class="fs-32 color-0 fw-b">推荐</text>
			</view>
			<view>
				<homeCareList :careList="careList" @reservation="reservation" @goDetails="goDetails"></homeCareList>
			</view>
		</view>
	</view>
</template>

<script>
	import homeCareList from '@/components/homeCare/list.vue'
	import searchNav from '@/components/searchNav/index.vue'
	import {nurseList} from '@/api/homeCare.js'
    import {cateList} from 'api/culturalPropaganda'
    import $baseUrl from "@/config/index.js"
    const BASE_URL = $baseUrl.baseUrl

    export default {
		components: {
			searchNav,
			homeCareList
		},
		data() {
			return {
				careList: [ ],
				page :1,
                cateList:[ ],
                isMore:true,
                BASE_URL
			}
		},
		onLoad() {
			this.init()
            this.getCateList()
		},
        //上拉加载函数
        onReachBottom(){
            if(this.isMore){
                setTimeout(()=>{
                    this.getList()
                },100)
            }else{
                uni.showToast({
                    title: '暂无更多',
                    icon: 'none'
                })
            }

        },
        onPullDownRefresh () {
            //刷新初始化数据
            this.init()
            //关闭刷新动画
            setTimeout(function () {
                uni.stopPullDownRefresh()
            }, 1000)
        },
		methods: {
            getCateList(){
                cateList({type:1}).then(res=>{
                   if (res.code == 1){
                       this.cateList=res.data
                   }else {
                       uni.showToast({
                           title:res.msg,
                           icon:'none'
                       })
                   }
                })
            },
            goCateDetails(index){
                let id = this.cateList[index].id
                uni.navigateTo({
                    url: '/pageA/homeCare/more?id=' + id
                })
            },
			search(e) {
				console.log(e, 1)
			},
			reservation(e) {
				console.log(e);
			},
			goDetails(e) {
				
			},
			goMore() {
				uni.navigateTo({
					url: '/pageA/homeCare/more'
				})
			},
            init(){
                this.careList =[]
                this.page = 1
				this.getList()
			},
			getList(){
				let params = {
					page:this.page,limit :10,
				}
                let arr= []
				nurseList(params).then(res =>{
					if(res.code == 1){
						arr= res.data
						arr.map(item =>{
							var type = item.tags.split(",");
							item.type = type
						})
						
						this.careList = this.careList.concat(arr)
                        if (res.data.length < 10){
                            this.isMore = false
                        }else {
                            this.isMore = true
                            this.page ++

                        }
					}else {
						uni.showToast({
							title:res.msg ,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		min-height: 100vh;
	}

	.title {
		padding: 30rpx 0;
	}

	.img-bar {
		flex-wrap: wrap;

		view {
			margin-bottom: 40rpx;
		}

		image {
			width: 340rpx;
			height: 120rpx;
		}
	}
</style>